/**
 * Text
 */

 import eventHelper from "../../../../../utils/EventHelper";

 import React,{Component} from "react";
 import Header from "../Header";
 import Footer from "../Footer";
 import consts from "../../../../../consts/consts";
 import storage from "../../../../../utils/storage";
 
 class Text extends Component{
    constructor(props) {
        super(props);
        this.state = {             
            text: ''
        };
    }
    componentDidMount(){
        const {data} = this.props;
        this.setState({
            text: data.text || ''
        })
    }
    handleOnChangeText(){
        let target = $(this.refs.text);
        let val = target.val();
        this.setState({
            text: val
        })
    }
    handleOnSaveData(){
        const {data: widget,setState,updateWidget} = this.props;

        widget.text = this.state.text;
        widget.propertyChanged = true;
        
        setState({selectedWidget: widget});
        updateWidget(widget);
        eventHelper.trigger(consts.EVENTS.THREED_WIDGET_PROPERTY_CHANGED, widget);
    }
    render(){
        const {type,data,timelines,selectedWidgetId,selectContents,updateWidget,setState} = this.props;
        let actionType = data.action.type;
        let detailType = consts.WIDGET_EVENTS_MAPPING[actionType];
        let focus = ( data.widget_id == selectedWidgetId );
        let FooterNode = "";
        if(detailType){
            FooterNode = <Footer type={detailType} data={data} timelines={timelines} updateWidget={updateWidget} setState={setState} />
        }
        return (
            <div ref="content" className={"content-item " + (focus ? "focus " : " ") + (data.visible ? "unfold " : "fold ")} onClick={() => selectContents(data)}>
                <Header type={type} data={data} updateWidget={updateWidget} setState={setState} />
                <div className="content text-property">
                    <textarea className='text-input' ref='text' onChange={() => this.handleOnChangeText()} onBlur={() => this.handleOnSaveData()} value={this.state.text}></textarea>
                    <div style={{ clear:"both" }} className='text-input-tip'>{$._('Modify in the text box to replace the text')}</div>
                </div>
                {FooterNode}
            </div>
        )
    }
 }

 module.exports = Text;
